<template>
	<view class="shop-page">
		<view class="container">
			<view class="top-group">
				<view class="top-bar"></view>
				<view class="quick-grid">
					<view class="quick-item" v-for="n in 4" :key="'q'+n"></view>
				</view>
				<view class="mini-grid">
					<view class="mini-item" v-for="n in 10" :key="'m'+n">
						<view class="mini-icon"></view>
						<view class="mini-label"></view>
					</view>
				</view>
			</view>
			<view class="banner"></view>
			<view class="section-card">
				<view class="section-title"></view>
				<view class="section-content">
					<view class="left-large"></view>
					<view class="right-column">
						<view class="right-card">
							<view class="right-subcard"></view>
							<view class="right-subcard"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<smart-tabbar></smart-tabbar>
	</view>
</template>

<script>
import SmartTabbar from '@/components/smart-tabbar/index.vue'

export default {
	name: 'Shop',
	components: {
		SmartTabbar
	},
	data() {
		return {}
	},
	onLoad() {
		console.log('积分商城页面加载完成');
	}
}
</script>

<style scoped>
.shop-page {
	min-height: 100vh;
	background: #f5f5f5;
}

.container { padding: 20rpx; }

.top-group { background: #ffffff; border-radius: 16rpx; padding: 20rpx; box-sizing: border-box; }

.top-bar { width: 160rpx; height: 48rpx; background: #eeeeee; border-radius: 12rpx; margin: 10rpx 0 20rpx 0; }

.quick-grid { display: flex; justify-content: space-between; margin-bottom: 20rpx; }
.quick-item { width: 21%; aspect-ratio: 1 / 1; background: #ffcda8; border-radius: 20rpx; }

.mini-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-row-gap: 20rpx; grid-column-gap: 20rpx; margin: 40rpx 0 20rpx 0; }
.mini-item { display: flex; flex-direction: column; align-items: center; }
.mini-icon { width: 80rpx; height: 80rpx; background: #e9e9e9; }
.mini-label { width: 120rpx; height: 24rpx; background: transparent; border-radius: 8rpx; margin-top: 12rpx; }

.banner { width: 100%; height: 200rpx; background: #e6e6e6; border-radius: 16rpx; margin: 20rpx 0 24rpx 0; }

.section-card { background: #ffffff; border-radius: 20rpx; padding: 20rpx; border: 1rpx solid #f0f0f0; }
.section-title { width: 160rpx; height: 36rpx; background: #e6e6e6; border-radius: 12rpx; margin-bottom: 20rpx; }
.section-content { display: flex; justify-content: space-between; gap: 20rpx; }
.left-large { flex: 1; height: 220rpx; background: #cfe5ff; border-radius: 16rpx; }
.right-column { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.right-card { width: 100%; height: 220rpx; background: #ffffff; border-radius: 16rpx; padding: 12rpx; box-sizing: border-box; display: flex; flex-direction: column; gap: 12rpx; }
.right-subcard { flex: 1; background: #eeeeee; border-radius: 12rpx; }
</style>
